<style type="text/css">
    .side-left {
        width: 650px;
        display: inline-block;
        vertical-align: top;
        padding-right: 1em;
        margin-bottom: 1em;
    }

    .side-right {
        width: 230px;
        display: inline-block;
        vertical-align: top;
        padding-left: 1em;
    }

    .side-right .title {
    }
    /*
        .page .header {
            position: fixed;
            top: 0px;
            width: 960px;
            z-index: 100;
        }
    
        .page .content {
            padding-top: 9.1em;
        }
    */
</style>
<h1 class="title">
    <?php echo $pageTitle; ?>
</h1>
<hr />
<div style="margin-top: -0.05em; margin-bottom: -0.3em;">
    Lihat :
    <select id="selpage" onChange="javascript:window.location = $('#selpage').val();">
        <option value="<?php echo site_url("galeri/home/populer"); ?>" <?php echo ($sortby == "populer" ? "selected='selected'" : ""); ?>>Terpopuler</option>
        <option value="<?php echo site_url("galeri/home/baru"); ?>" <?php echo ($sortby == "baru" ? "selected='selected'" : ""); ?>>Terbaru</option>
    </select>
    <div style="display: inline-block; top: 5px;position:  relative;">
        <?php $this->view("fbshare"); ?>
    </div>
    <?php
    if ($loggedUser != NULL) {
        if (in_array("gal_contributor", $loggedUser->roles)) {
            echo "<a href='" . site_url("usercp/uploadgal/img") . "'><button>Upload Gambar</button></a>";
        }
    }
    ?>
</div>
<div class="side-left">
    <div id="gal_lists">
    </div>
    <div id="smorebtncontainer" class="hidden">
        <button style="width: 100%;" onClick="javascript:showMore();">Tampilkan lebih banyak</button>
    </div>
    <div id="loadingbtncontainer" class="hidden">
        <button style="width: 100%;" disabled="disabled">Loading</button>
    </div>
</div>
<div class="side-right">
    <h1>Terpilih</h1>
    <div id="galhl_lists" style="margin-top: 1.1em; margin-bottom: -0.05em;">
    </div>
    <div id="smorehlbtncontainer" class="hidden">
        <button style="width: 100%;" onClick="javascript:showMoreHL();">Tampilkan lebih banyak</button>
    </div>
    <div id="loadinghlbtncontainer" class="hidden">
        <button style="width: 100%;" disabled="disabled">Loading</button>
    </div>
</div>

<script type="text/javascript">
        var curPage = 0;
        var curPageHL = 0;

        jQuery(document).ready(function() {
            showMore();
            showMoreHL();
        });

        function showMore() {
            $("#smorebtncontainer").addClass("hidden");
            $("#loadingbtncontainer").removeClass("hidden");
            $.ajax({
                url: "<?php echo site_url("service/getDataJSON"); ?>/<?php echo $showMoreCode; ?>",
                method: "POST",
                dataType: "json", data: {
                    page: curPage
                },
                success: function(data) {
                    if (data.length > 0) {
                        curPage++;
                        $("#smorebtncontainer").removeClass("hidden");
                        $("#loadingbtncontainer").addClass("hidden");
                        for (var i = 0; i < data.length; i++) {
                            var gal = data[i];
                            var newGal = "";
                            newGal += "<div class='gal_item id" + gal.id + "' style='padding: 0;'>";
                            newGal += "<div>";
                            newGal += "<h1><a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'>" + gal.judul + "</a></h1>";
                            newGal += "</div>";
                            newGal += "<div style='margin-top: 0.2em;'>";
                            newGal += gal.approved + " oleh <a href='javascript:void(0);'>" + gal.poster_name + "</a> - " + gal.points + " points";
                            newGal += "</div>";
                            newGal += "<div style='margin: 1em 0;'>";
                            newGal += "<a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'><img src='" + gal.src + "' /></a>";
                            newGal += "</div>"
                            newGal += "<div class='navbtns'>";
                            newGal += "<a href='javascript:void(0);' onClick='javascript:doFBShare(\"<?php echo str_replace("www.", "", site_url("galeri/lihat")); ?>/" + gal.id + "\", \"\");'><button>Share</button></a>";
<?php if ($loggedUser != null) { ?>
                                newGal += "<a href='javascript:void(0);' onClick='javascript:doVote(" + gal.id + ", \"u\");'><button class='uvbtn'" + (gal.vote > 0 ? " disabled='disabled' " : "") + ">Upvote</button></a>";
                                newGal += "<a href='javascript:void(0);' onClick='javascript:doVote(" + gal.id + ", \"d\");'><button class='dvbtn'" + (gal.vote < 0 ? " disabled='disabled' " : "") + ">Downvote</button></a>";
<?php } ?>
                            newGal += "<a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'><button>Komentar</button></a>";
                            newGal += "</div>";
                            newGal += "<hr />";
                            newGal += "</div>";
                            $("#gal_lists").append(newGal);
                        }
                        if (data.length < 5) {
                            $("#smorebtncontainer").addClass("hidden");
                            $("#loadingbtncontainer").addClass("hidden");
                        }
                    } else {
                        $("#smorebtncontainer").addClass("hidden");
                        $("#loadingbtncontainer").addClass("hidden");
                    }
                }
            });
        }


        function showMoreHL() {
            $("#smorehlbtncontainer").addClass("hidden");
            $("#loadinghlbtncontainer").removeClass("hidden");
            $.ajax({
                url: "<?php echo site_url("service/getDataJSON"); ?>/galhl",
                method: "POST",
                dataType: "json", data: {
                    page: curPageHL,
                    perpage: 5
                },
                success: function(data) {
                    if (data.length > 0) {
                        curPageHL++;
                        $("#smorehlbtncontainer").removeClass("hidden");
                        $("#loadinghlbtncontainer").addClass("hidden");
                        for (var i = 0; i < data.length; i++) {
                            var gal = data[i];
                            var newGal = "";
                            newGal += "<div class='galhl_item id" + gal.id + "' style='padding: 0; display: inline-block; width: 200px;'>";
                            newGal += "<div style='margin: 0; margin-bottom: -0.5em;'>";
                            newGal += "<a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'><img src='" + gal.tmb + "' /></a>";
                            newGal += "</div>";
                            newGal += "<div style='margin-bottom: 1.2em;'>";
                            newGal += "<h1><a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'>" + gal.judul + "</a></h1>";
                            newGal += "</div>";
                            newGal += "</div>";
                            $("#galhl_lists").append(newGal);
                        }
                        if (data.length < 5) {
                            $("#smorehlbtncontainer").addClass("hidden");
                            $("#loadinghlbtncontainer").addClass("hidden");
                        }
                    } else {
                        $("#smorehlbtncontainer").addClass("hidden");
                        $("#loadinghlbtncontainer").addClass("hidden");
                    }
                }
            });
        }

        function doVote(id, vote) {
            $.ajax({
                url: "<?php echo site_url("galeri/vote"); ?>",
                method: "POST",
                dataType: "json", data: {
                    gi: id,
                    v: vote
                },
                success: function(data) {
                    $(".gal_item.id" + id + " .uvbtn").prop("disabled", false);
                    $(".gal_item.id" + id + " .dvbtn").prop("disabled", false);
                    if (data > 0) {
                        $(".gal_item.id" + id + " .uvbtn").prop("disabled", true);
                    }
                    if (data < 0) {
                        $(".gal_item.id" + id + " .dvbtn").prop("disabled", true);
                    }
                }
            });
        }
</script>